
html, body {
    height: 100%;
    color:#858d92;
}
/*
h3 {
  font-size: 1.6em;
}

*/

.body-content{
  max-width:100%;
}

footer {
  text-align: center;
  padding:1em;
}
.navbar {
  margin-bottom:2em;
}


/*file upload styles*/

  input[type=file]
  {
    border: 2px solid #6d6e6e;
    padding: 1em;
    background-color: #f9f9f9;
    box-shadow: 3px 3px 3px #c0c0c0;
    margin:1em;
  }
  /*end file upload styles*/


  /* from https://css-tricks.com/snippets/css/shake-css-keyframe-animation/ */
  .ape:hover {
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }

  .well {
    padding:1em;
  }

  .sample-swatch{
    display:inline-block;
    height:16px;
    width:16px;
    border:1px solid gainsboro;
    background-color: black;
  }